<template>
  <div class="common-layout">
    <el-container>
      <el-aside width="200px">
        <!-- 左侧菜单栏  -->
        <!-- unique-opened只允许同时打开一项菜单项 router允许菜单项进行路由跳转 -->
        <el-menu
            background-color="#136cd0"
            text-color="#fff"
            active-text-color="#ff0"
            style="width:100%;height:100vh;"
            unique-opened
            router
            @select="selectMenu"
        >
          <!-- 左侧菜单栏的顶部条  -->
          <el-row style="padding-top:20px;">
            <el-col :span="2"></el-col>
            <el-col :span="6" style="padding-left: 7px;">
              <el-avatar src="logo.png" style="width: 35px;height: 35px;"></el-avatar>
            </el-col>
            <el-col :span="14" >
              <router-link to="/"
                           style="color:#fff;
                  font-weight:bold;
                  text-decoration:none;
                  position:relative;
                  top:8px;">停车场管理</router-link>
            </el-col>
          </el-row>

          <el-sub-menu index="1">
            <template #title>
              <el-icon><Van/></el-icon><span>停车场管理</span>
            </template>
            <el-menu-item index="/management">停车场管理</el-menu-item>
            <el-menu-item index="/blacklist">黑名单管理</el-menu-item>
          </el-sub-menu>

          <el-sub-menu index="2">
            <template #title>
              <el-icon><Checked/></el-icon><span>计费规则</span>
            </template>
            <el-menu-item index="/tempRule">临停计费</el-menu-item>
            <el-menu-item index="/longRule">长租计费</el-menu-item>
          </el-sub-menu>

          <el-sub-menu index="3">
            <template #title>
              <el-icon><Postcard/></el-icon><span>月租管理</span>
            </template>
            <el-menu-item index="/userParkCard">用户月租</el-menu-item>
          </el-sub-menu>

          <el-sub-menu index="4">
            <template #title>
              <el-icon><List/></el-icon><span>记录管理</span>
            </template>
            <el-menu-item index="/parkRecord">停车记录</el-menu-item>
            <el-menu-item index="/payRecord">缴费记录</el-menu-item>
          </el-sub-menu>

          <el-sub-menu index="5">
            <template #title>
              <el-icon><User/></el-icon><span>用户管理</span>
            </template>
            <el-menu-item index="/admin">管理员</el-menu-item>
          </el-sub-menu>

          <el-sub-menu index="6">
            <template #title>
              <el-icon><More/></el-icon><span>其他</span>
            </template>
            <el-menu-item index="/operationLog">操作日志</el-menu-item>
          </el-sub-menu>
        </el-menu>
      </el-aside>

      <el-container>
        <el-header style="height:10vh;background-color:#fff;padding-top:20px;">
          <!--  面包屑导航  -->
          <el-breadcrumb separator="/" style="position:relative; font-size: 16px; top:20px;">
            <el-breadcrumb-item>首页</el-breadcrumb-item>
            <el-breadcrumb-item v-for="item in breadcrumb">{{item}}</el-breadcrumb-item>
          </el-breadcrumb>

          <el-row>
            <el-dropdown trigger="click" style="position: absolute;right: 40px;">
              <span style="font-size:20px;font-weight: bold;">
                {{ admin.name }}
                <el-icon><arrow-down/></el-icon>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </el-row>
        </el-header>

        <!-- 右侧主体内容:除了顶部条与面包屑之外的可变区域,其他具体内容在子页面中写! -->
        <el-main style="height:90vh; padding:0; overflow-y: auto;">
          <RouterView/>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useAuthStore } from '@/stores/auth'
import { useRouter } from 'vue-router'
import {ElMessage, ElMessageBox} from "element-plus";

const authStore = useAuthStore()
const router = useRouter()

// 获取当前登录的用户对象
const admin = ref(authStore.getAdmin())

// 安全初始化面包屑
const initialBreadcrumb = () => {
  try {
    const data = JSON.parse(localStorage.getItem('breadcrumb'))
    return Array.isArray(data) ? data : ['首页内容']
  } catch {
    return ['首页内容']
  }
}

const breadcrumb = ref(initialBreadcrumb())

//定义集合用来维护页面路径与面包屑的对应关系
let map = {
  '/management': ['停车场管理'],
  '/blacklist': ['黑名单管理'],
  '/tempRule': ['临停计费'],
  '/longRule': ['长租计费'],
  '/userParkCard': ['用户月租'],
  '/parkRecord': ['停车记录'],
  '/payRecord': ['缴费记录'],
  '/admin': ['管理员'],
  '/operationLog': ['操作日志']
}

//只要选择了菜单项,就切换面包屑的值
const selectMenu = (index)=>{
  breadcrumb.value = map[index];
  // //解决面包屑丢失问题:每次切换页面时,将当前页对应的面包屑值存入localStorage中
  localStorage.setItem('breadcrumb', JSON.stringify(breadcrumb.value))
}

//定义退出登录功能
const logout = () => {
  ElMessageBox.confirm(
      '是否确认退出登录?',
      '提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
  )
      .then(() => {
        // 调用 authStore 的 logout 方法
        authStore.logout()
        ElMessage.success('已退出登录')
      })
      .catch(() => {
        // 用户取消退出，不做任何操作
      })
}
</script>

<style scoped>

</style>